<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		function formatColumn(colName,value,row,index) {
			if(colName!=""&&value!=null)
		    return eval("row."+colName);
		}
		
		//查询、添加、修改、删除
		function query(){
		   $('#mydatagrid').datagrid('load',{
			   name:$("#name").val()
		   });
	   }
		
		var url;
		function newDialog(){
			$('#dlg').dialog('open').dialog('setTitle','创建房间信息');
			$("#fm").form('clear');
			$("#Building.bid").val($("#Building.bid option:first").val());
			$('#btn1').linkbutton({//创建linkbutton
			    iconCls:'icon-ok',
			    text:'保存'
			});
			url='<%=basePath%>room/add.action';
		}
		
		function editor(){
			var row=$('#mydatagrid').datagrid("getSelected");
			if(row){
				$('#dlg').dialog('open').dialog('setTitle','修改楼宇信息');
				$('#fm').form('load',row);
				$("#buildingSelect").find("option[value=\'"+eval('row.building.bid')+"\']").attr("selected",true);
				$('#btn1').linkbutton({//创建linkbutton
				    iconCls:'icon-ok',
				    text:'修改'
				});
				url='<%=basePath%>room/update.action';
			}
		}
		
		//datagrid双击事件，同editor功能
		$(function(){
			$('#mydatagrid').datagrid({
				onDblClickRow:function(rowIndex,rowData){
					//alert(rowData.supplierId);
					$('#dlg').dialog('open').dialog('setTitle','修改楼宇信息');
					$('#fm').form('load',rowData);
					$("#buildingSelect").find("option[value=\'"+eval('rowData.building.bid')+"\']").attr("selected",true);
					$('#btn1').linkbutton({//创建linkbutton
					    iconCls:'icon-ok',
					    text:'修改'
					});
					url='<%=basePath%>room/update.action';
				}
			});
		});
		
		function save(){
			$('#fm').form('submit',{
				url:url,
				onSubmit:function(){
					// 做某些检查 ,返回 false 来阻止提交
				},
				success:function(result){
					var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title:'错误信息',
                            msg:result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#mydatagrid').datagrid('reload');    // reload the user data
                    }
				}
			});
		}
		
		
		function del(){
			   var row=$('#mydatagrid').datagrid("getSelected");
			   if(row){
				   $.messager.confirm('消息','您确定要删除房间\''+row.name+'\'吗?',function(r) {
						if (r) {
							$.ajax({
								url:"<%=basePath%>/room/del/"+row.rid+".action",
								type:'get',
								timeout:5000,
								success:function(data) {
									$.messager.alert('消息',data);
									$('#mydatagrid').datagrid('reload');
								}
							});
						} 
					});
			   }else{
				   $.messager.show({
					   title:'提示信息',
					   msg:'请选择一项要删除的内容！！！'
				   });
			   }
		}
	</script>
</head>
<body>
    <div id="main-frame">
		<div id="search-content" style="float:left;margin-bottom:10px;">
		<div id="serar-panel" class="easyui-panel" style="width:1060px;height:auto;padding:3px;" 
				 title="查询"  data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table style="font-size:12px">
					<tr>
						<td>房间名称</td>
						<td><input id="name" class="easyui-validatebox" 
							style="width:120px">
						</td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float:left;">
			<table id="mydatagrid" class="easyui-datagrid" title="房间信息管理列表" style="width:1060px;height:480px"
	            data-options="singleSelect:true,	            
	            url:'<%=basePath%>/room/getPageList.action',
	            collapsible:true,
	            rownumbers:true,
	            toolbar:'#toolbar',
	            fitColumns:true,
	            //sortName:'creatTime',
	            //sortOrder:'desc',
	            noheader:false, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            idField:'rid'">
		        <thead>
		            <tr>
		            	<th data-options="field:'building',width:60,sortable:true" formatter="(function(v,r,i){return formatColumn('building.name',v,r,i);})">建筑名称</th>
		                <th data-options="field:'rid',width:100,sortable:true">房间编号</th>
		                <th data-options="field:'name',width:120,sortable:true">房间名称</th>
		                <th data-options="field:'size',width:100,sortable:true">房间大小</th>	
		                <th data-options="field:'floor',width:110,sortable:true">所在楼层</th>
		                <th data-options="field:'comment',width:100,sortable:true">备注信息</th>
		            </tr>
		        </thead>
		    </table>
		    <div id="toolbar">
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newDialog()">添加</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editor()">修改</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
		   	</div>
		   	<!-- 添加面板区域 -->
		   	<div id="dlg" class="easyui-dialog" title="添加楼宇信息" style="width:550px;height:320px;padding:10px 20px"
		   		 data-options="iconCls:'icon-save',closed:true,modal:true,buttons:'#dlg-buttons',cache:false">
		   		<div class="ftitle">创建楼宇信息</div>
		   		<form:form id="fm" action="" method="post" commandName="room">
				<table>
					<tr>
						<td><form:label path="rid">房间编号</form:label></td>
						<td><form:input path="rid"/></td>
						<td><form:label path="Building">楼宇名称</form:label></td>
						<td><form:select id="buildingSelect" path="Building.bid" >
								<form:options items="${buildingList}"/>	
							</form:select></td>
					</tr>
					<tr>
						<td><form:label path="name">房间名称</form:label></td>
						<td><form:input path="name"/></td>
						<td><form:label path="size">建筑面积</form:label></td>
						<td><form:input path="size"/></td>
					</tr>
					<tr>
						<td><form:label path="floor">所在层数</form:label></td>
						<td><form:input path="floor"/></td>
						<td><form:label path="comment">备注信息</form:label></td>
						<td><form:input path="comment"/></td>
					</tr>
				</table>
				</form:form>
		   	</div>
		   	<div id="dlg-buttons">
		   		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()" id="btn1">保存</a>
		   		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
		   	</div>
	    </div>
	</div>
</body>
</html>